<template>
  <a-modal v-model:visible="visible" :footer="false" title="类别管理" :width="800">
    <a-space>
      <a-form-item field="category" label="类别" style="margin-bottom: 0">
        <a-input v-model="category" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-popconfirm content="确认添加分类?" @ok="handleadd()">
        <a-button type="primary">
          <template #default>确认</template>
        </a-button>
      </a-popconfirm>
    </a-space>
    <section class="table-box" style="margin-top: 16px">
      <a-table
        row-key="id"
        size="small"
        page-position="bl"
        :bordered="{ cell: true }"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: '400px' }"
        :pagination="{ showPageSize: true, showTotal: true, total: total, current: current, pageSize: pageSize }"
      >
        <template #columns>
          <a-table-column title="类别" data-index="name"></a-table-column>
          <a-table-column title="生成时间" data-index="createtime"></a-table-column>
          <a-table-column title="操作" :width="200" align="center" fixed="right">
            <template #cell="{ record }">
              <a-space>
                <a-popconfirm content="确认移除?" @ok="handleDelete(record)">
                  <a-link status="danger">
                    <template #default>移除</template>
                  </a-link>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </section>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { usePagination } from '@/hooks'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { getPictureCategoryList, addPictureCategoryList, removePictureCategoryList } from '@/apis'

const emits = defineEmits(['reFreshTable'])
const visible = ref(false)
const category = ref('')

const loading = ref(false)
const tableData = ref([])

const { current, pageSize, total, changeCurrent, changePageSize, setTotal } = usePagination(() => getTableData())

const getTableData = async () => {
  loading.value = true
  const resData = await getPictureCategoryList({
    page: current.value,
    pagesize: pageSize.value
  })

  if (resData.code == 1) {
    tableData.value = resData.data.data
    setTotal(resData.data.total)
    loading.value = false
  } else {
    loading.value = false
  }
}

const show = (id?: string) => {
  visible.value = true
  getTableData()
}
const handleadd = async () => {
  if (!category.value) {
    Message.error('请输入类别名称')
    return
  }
  let res = await addPictureCategoryList({
    name: category.value
  })
  if (res.code == 1) {
    Message.success(res.msg || '添加成功')
    getTableData()
    category.value = ''
  } else {
    Message.error(res.msg || '添加失败')
  }
}
const handleDelete = async (record: any) => {
  let res = await removePictureCategoryList({ category_id: record.id })
  if (res.code == 1) {
    Message.success(res.msg || '移除成功')
    getTableData()
  } else {
    Message.error(res.msg || '移除失败')
  }
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
